<template>
  <!-- 拖拽式 -->
  <div ref="uploadWrap">
    <el-upload
      ref="upload"
      :class="'uploadDemo ' + params.warning + ' ' + params.disable"
      :drag="props.whichUpload === '拖拽式'"
      action="https://jsonplaceholder.typicode.com/posts/"
      :accept="props.message.fileType ? props.message.fileType : '.jpg, .png'"
      :auto-upload="false"
      :on-change="changeFile"
      :on-remove="removeFile"
      :multiple="props.message.multiple"
      :disabled="props.message.disabled"
    >
      <i v-if="props.whichUpload === '拖拽式'" class="el-icon-upload"></i>
      <div v-if="props.whichUpload === '拖拽式'" class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>

      <!-- 按钮式 -->
      <el-button
        v-if="props.whichUpload !== '拖拽式'"
        size="small"
        type="primary"
        >{{
          props.message.selectBtnName ? props.message.selectBtnName : "选择文件"
        }}</el-button
      >

      <!-- 上传文件类型提示信息 -->
      <div class="el-upload__tip">
        {{
          props.message.fileTipsMsg
            ? props.message.fileTipsMsg
            : "只能上传.jpg .png结尾的文件，且不超过500kb"
        }}
      </div>
    </el-upload>
  </div>
</template>
<script setup>
// 引入上传接口
import { _upload } from "./api"; // 俩参数 （后台接口路径, formdata）
// 引入提示信息
import MsgFn from "@/utils/message";
import { reactive, onMounted, ref } from "vue";
// 模板*************************************************************************************************************
//   message: {
//     selectBtnName: "选择文件",                             //默认 "选择文件"
//     fileTipsMsg: "上传什么类型结尾的文件的提示信息",         //默认 "只能上传.jpg .png结尾的文件，且不超过500kb"
//     multiple: true, //单选 or 多选                         //默认  单选
//     fileType: ".jpg, .png", // 上传文件的类型约束           //默认  ".jpg, .png"
//     uploadData:{}, // 要上传的静态数据                      //默认  没有  也就是不传
//     url: "上传文件的路径, 后端传过来的",                     //必传
//     fileKey: "上传文件流的名字",                            //默认  "file"
//     valid: false, // 是否添加校验                           //默认  false
//     disabled: false, // 是否禁用                            //默认  false
//     size: 500, // 上传文件大小约束                           //默认  500kb
//   },
// 模板*************************************************************************************************************

// upload 的dom节点
const uploadWrap = ref(null);
// 父组件消息
const props = defineProps({
  // 上传组件的基本配置信息   具体参照上面注释
  message: {
    type: Object,
    default: () => {
      return {};
    },
  },
  // 哪种上传组件     "拖拽式"    "按钮式"
  whichUpload: {
    type: String,
    default: "拖拽式",
  },
});
// 初始化样式
onMounted(() => {
  console.log(uploadWrap.value);
  // 如果是 拖拽式  样式设为和父元素一样的  否则  就是按钮式  不要宽度
  if (props.whichUpload === "按钮式") console.log(uploadWrap.value.children);
  // uploadWrap.value.children[0].$el.style.width = "0px";
  // else uploadWrap.value.children[0].$el.style.width = "100%";
});

const params = reactive({
  // 上传文件的列表数组
  fileList: [],
  // 上传文件  必选的  提示样式
  warning: "",
  // 禁用样式
  disable: props.message.disabled ? "disable" : "",
});

// 提交文件的方法
const submitUpload = () => {
  // 创建formdata 对象
  let formdata = new FormData();
  // 如果上传的数据为不为空  则遍历传过来的数据  并且加上 文件流  否则  不上传数据
  if (
    props.message.uploadData &&
    Object.getOwnPropertyNames(props.message.uploadData).length !== 0
  ) {
    for (let i in props.message.uploadData) {
      formdata.append(i, props.message.uploadData[i]);
    }
  }
  // 添加文件流
  params.fileList.forEach(item => {
    formdata.append(
      props.message.fileKey ? props.message.fileKey : "file",
      item.raw
    );
  });

  // 如果通知是 需要上传文件校验  并且你的文件列表长度为0  则提示必须上传文件  并不发请求
  if (props.message.valid && params.fileList.length === 0) {
    params.warning = "warning";
    MsgFn("请选择附件", "warning");
    return;
  }
  // 发送上传请求   俩参数 （后台接口路径, formdata）
  _upload(props.message.url, formdata);
};

const emit = defineEmits(["childEvent"]);

// 上传文件发生变化的钩子
const changeFile = (file, fileList) => {
  // 上传文件是否必选  样式提示
  if (props.message.valid && fileList.length !== 0) {
    params.warning = "";
  }
  fileList.forEach(item => {
    // 求出 每个是多少kb
    let size = item.size / 1024;
    // 如果大于500 去掉
    if (size > (props.message.size ? props.message.size : 500)) {
      setTimeout(() => {
        MsgFn(
          `文件 <b style="color: red">${item.name}</b> 的大小不符合要求,请从新选择`,
          "warning",
          true,
          3000
        );
      });
      fileList.splice(fileList.indexOf(item));
    }
  });
  params.fileList = fileList;
  emit("childEvent", params.fileList);
};

// 删除文件列表的钩子
const removeFile = (file, fileList) => {
  params.fileList = fileList;
  emit("childEvent", params.fileList);
};

// 暴露 子组件方法
defineExpose({ submitUpload });
</script>
<!-- 样式 -->
<style lang="scss">
@import "./index.scss";
</style>
